<template>
  <div class="order-container">
    <div class="order-header">
      <div
        style="
          color: rgb(255, 248, 29);
          gap: 4px;
          font-weight: 600;
          display: flex;
          align-items: center;
        "
      >
        <img :src="systemMsg" alt="systemMsg" />
        <div>系统<br />消息</div>
      </div>
      <div style="color: rgb(242, 184, 110)">
        <span style="font-size: 20px; font-weight: 600">昵称：</span>
        我要搞钱
      </div>
      <div
        style="
          color: rgb(155, 226, 84);
          gap: 4px;
          font-weight: 600;
          display: flex;
          align-items: center;
        "
      >
        <div>24H<br />客服</div>
        <img :src="kfImg" alt="systemMsg" />
      </div>
    </div>

    <div class="order-acitons">
      <div style="color: #fff; font-weight: 600; padding: 8px 0">
        距离自动停止接单时间剩余 小时 分 秒
      </div>
      <Button style="font-weight: 700; font-size: 20px" icon="play-circle" color="#00c4ac"
        >开始接单</Button
      >
      <div class="order-info">
        <div>
          0.0
          <div class="red">总余额</div>
        </div>

        <div>
          0.0
          <div class="red">交易中</div>
        </div>

        <div>
          0.0
          <div class="red">可用余额</div>
        </div>
      </div>
    </div>

    <div class="order-footer">
      <div>
        0.0
        <div class="red">今日总返佣</div>
      </div>

      <div>
        0.0
        <div class="red">今日我的返佣</div>
      </div>

      <div>
        0.0
        <div class="red">今日下级返佣</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import systemMsg from '@/assets/images/systemMsg.png'
import kfImg from '@/assets/images/kf.png'
import { Button } from 'vant'
</script>

<style scoped lang="less">
.order-container {
  padding: 8px;

  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .order-acitons {
    background-image: url('@/assets/images/orderAction.png');
    text-align: center;
    background-image: linear-gradient(to top, rgb(223, 175, 197) 0%, rgb(56, 122, 170) 100%);
    margin: 8px 0;
    border-radius: 10px;

    .order-info {
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      font-weight: 600;

      // 56,122,170
      // 223,175,197
      .red {
        color: rgb(111, 38, 49);
      }
    }
  }

  .order-footer {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 18px;
    text-align: center;

    // 56,122,170
    // 223,175,197
    .red {
      color: rgb(111, 38, 49);
    }
  }
}
</style>
